<template>
  <div class="app-container">
    <div style="padding: 10px 0;">
      <el-button type="primary"
                 @click="openDialog({dialogName: 'add-escrow-dialog', props: {}})">添加三方提现应用
      </el-button>
    </div>
    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="序号" prop="id" width="60" align="center"></el-table-column>
      <el-table-column label="三方支付平台名称" prop="channelName" width="180" align="center">
      </el-table-column>
      <el-table-column label="自动出款金额" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.minAmount + '-' + row.maxAmount}}
        </template>
      </el-table-column>
      <el-table-column label="商户号" prop="merchantCode" align="center">
      </el-table-column>
      <!--<el-table-column label="应用端" prop="platform">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.platform | toConverter('PAYMENT_PLATFORM')}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="最后修改时间" prop="lastUpdate" align="center">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('ESCROWS_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center">
      </el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="toggleEscrow(row, 'open')" v-if="row.status=== 1">上架</el-button>
          <el-button type="text" @click="toggleEscrow(row, 'close')" v-else-if="row.status===0">下架</el-button>
          <el-button type="text" @click="openDialog({dialogName: 'add-escrow-dialog', props: row })">编辑</el-button>
          <el-button type="text" @click="toggleEscrow(row, 'del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <escrows-dialog
      v-if="dialogName === 'add-escrow-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      @submit="submitFinished"/>
  </div>
</template>


<script>
  import {
    delWithdrawEscrow,
    updateWithdrawEscrowStatus,
    getWithdrawMerchantList,
    updateEcsrowsSort} from "@/services/api/withdraw";
  import {grid, dialog} from '@/build'
  import EscrowsDialog from "@/views/finance/withdraw/escrowsDialog";

  export default {
    name: "withdraw-escrows",
    components: {EscrowsDialog},
    mixins: [grid,dialog],
    data() {
      return {
        tableData: [],
        filters: {
        },
        dialogVisible: false,
      }
    },
    methods: {
      submitFilterForm(formInline) {
        // const _formInline = Object.assign(this.filters, formInline)
        // this.filters = _formInline;
        this.filters = {...this.filters, formInline};
        this.gridSearch()
      },
      toggleEscrow({id,status}, tag = 'open') {
        let display = '';
        switch (tag) {
          case 'open':
            display = '开启';
            status = 0
            break;
          case 'close':
            display = '关闭';
            status = 1
            break;
          case 'del':
            display= '删除';
            break
        }

        this.$confirm(`确定要${display}三方支付吗？`, `${display}三方支付`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(tag === 'del'){
            delWithdrawEscrow({id}).then(([result,data])=>{
              if(result){
                this.gridSearch();
              }
            });
            return;
          }
          updateWithdrawEscrowStatus({id,status}).then(([result,data])=>{
            if(result){
              this.gridSearch();
            }
          })
        })
          .catch(() => {
          })
      },
    },
    mounted() {
      this.bindGet(getWithdrawMerchantList, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll();
      this.initSort(updateEcsrowsSort,true,'tableData','id')

    }
  }
</script>

<style lang="scss" scoped>
  .el-table-align-center {
    &.el-table {
      width: 100%;
      text-align: center !important;
      th {
        text-align: center !important;
      }
    }
  }

</style>
